<template>
	<view>
		<!-- 头部 -->
		<view class="title">
			抗击疫情
		</view>
		<!-- 最新消息 -->
		<view class="news">最新消息
			<view class="icon iconfont">&#xe62d;</view>
		</view>
		<!-- 最新消息组件 -->
		<view class="box" v-for="(item,i) in newsList" :key="i" @tap="listTap(item.sourceUrl)">
			<view class="top">{{item.title}}</view>
			<view class="msg">
				来源:{{item.infoSource}} {{item.pubDateStr}}
			</view>
		</view>、
		<view class="box2">
			<image class="img" :src="desc.imgUrl" mode=""></image>
			<image class="img" :src="desc.dailyPic" mode=""></image>
		</view>
		<!-- 占位 -->
		<view class="seat"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 最新消息数据
				newsList: [],
				// 描述
				desc: {}
			}
		},
		onLoad() {
			this.getData();
		},
		methods: {
			// 跳转webview组件
			listTap(url) {
				uni.navigateTo({
					url: '../webview/list?url=' + url
				});
			},
			getData() {
				uni.request({
					url: "http://api.tianapi.com/txapi/ncov/index",
					data: {
						key: "d9a5fe28d47299e04f121b8a909e9e86"
					},
					success: (res) => {
						console.log(res);
						this.newsList = res.data.newslist[0].news;
						this.desc = res.data.newslist[0].desc;
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		position: relative;
		width: 100%;
		height: 80upx;
		background: #ff5421;
		color: #fff;
		text-align: center;
		font-size: 32upx;
		line-height: 80upx;

		.search {
			position: absolute;
			top: 0;
			right: 28upx;
			font-size: 48upx;
		}
	}

	.news {
		padding: 0 20upx;
		font-size: 44upx;
		color: #198fe2;
		margin: 12upx 0;
		position: relative;

		.icon {
			position: absolute;
			top: -40upx;
			left: 200upx;
			font-size: 100upx;
			color: #ff5b0d;
		}
	}

	.box {
		height: 180upx;
		border-bottom: 1px solid #ccc;
		position: relative;
		padding: 20upx 0;
		box-sizing: border-box;

		.top {
			color: #444;
			font-size: 36upx;
			padding: 0 36upx;
		}

		.msg {
			color: #aaa;
			font-size: 24upx;
			padding-left: 36upx;
			position: absolute;
			bottom: 14px;
		}
	}

	.box2 {
		.img {
			width: 100%;
		}
	}
</style>
